<template>
  <div class="page white-stage">
    <div class="client-detail">
      <div class="client-detail-body">
        <div class="client-desc">
          <span class="img-wrapper"><img data-object-fit="cover" :src="client.avatar" /></span>
          <span class="social-name">{{ client.socialname }}</span>
          <span class="social-phone grey" style="color:#B2B2B2!important!;">{{ client.phone }}</span>
          <span class="ico grey">▶</span>
        </div>

        <div class="property-items">
          <span>状态：{{ client.state | getStatename }} <router-link class="alter-link" to="/">更改</router-link></span>
          <span>状态：{{ client.userType | getUserByType }} <router-link class="alter-link" to="/">更改</router-link></span>
        </div>

        <div class="label-list">
          <label v-for="(label, index) in client.labels " :key="index" class="label-item">
            <router-link :to="label.link">{{ label.name }}</router-link>
          </label>
        </div>
      </div>
      <section class="timeline-wrap">
         <div class="timeline" >
           <div v-for="(fulldata, index) in  allmessages">
             <div class="timeline-block date-block">
               <div class="date-mark picture">
               </div>
               <div class="date-content">{{ fulldata.date }}</div>
             </div>

             <div v-for="(messages, mskey, msi) in fulldata.messages" class="timeline-block" :class="{'left': mskey % 2 == 0, 'right': mskey % 2 !== 0 }">
               <router-link class="timeline-img picture" to="/client-info">
                 <img :src="messages.avatar" alt="Picture">
               </router-link>

               <div class="timeline-content">
                 <h2><span class="mark">预约跟进</span><i class="date-ico">2016.12.14 10:25</i></h2>
                 <p>发送预约试听</p>
                 <p>URL:xxxxxxxx</p>
               </div>
             </div>
           </div>
         </div>

       </section>

       <div class="menu-wrapper">
        <client-menu :itemList="itemList"></client-menu>
      </div>

    </div>
    </div>
</template>

<script>

  import Vue from 'vue'
  import clientMenu from '../components/client-menu'

  export default{
    props:{
      // client: {
      //   type : Object,
      //   require: true
      // }
    },
    data () {
      return {
       imgServer : this.$store.state.app.imgServer,

       itemList:[
        {
           title: '写跟进',
           link: '/add-follow'
        },

        {
          title: '约试听',
          link: '/h5-marketing'
        }
       ],

       client: {
         avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
         socialname: '林丽勤',
         counselor : '陈芳芳',
         userType : 1,
         state: '0',
         phone: 18320150265,
         counselorLink:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
         clientLink:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
         stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
         labels:[
           {
           name: '一岁半宝宝',
           link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           },

           {
           name: '金融',
           link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           },

           {
           name: '初步融洽',
           link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           },
         ]
       },

       allmessages:[
        {
          'date' : '2017-3-08 星期三',
          'messages': [
            {
            stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
            state: '0',
            message: '发送预约试听',
            link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           },

           {
            stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
            state: '0',
            message: '发送预约试听',
            link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           },


           {
            stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
            state: '0',
            message: '发送预约试听',
            link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           },

           {
            stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
            avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
            state: '0',
            message: '发送预约试听',
            link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
           }
         ]
         },

         {
           'date' : '2017-3-08 星期三',
           'messages': [
           {
             stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
             avatar: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D360/sign=e105b9f1d61b0ef473e89e58edc651a1/b151f8198618367a9f738e022a738bd4b21ce573.jpg',
             state: '0',
             message: '发送预约试听',
             link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
          },

          {
             stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
             avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
             state: '0',
             message: '发送预约试听',
             link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
          },


          {
             stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
             avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
             state: '0',
             message: '发送预约试听',
             link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
          },

          {
             stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
             avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
             state: '0',
             message: '发送预约试听',
             link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
          }
        ]
        }
       ]
      };
    },
    methods: {
    refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
    },

    log () {
      console.log('ee');
    },

    load (iscroll) {
      console.log('load')
      // Load new data
    },

    test () {
      console.log('test')
    }

    },

    components:{
      clientMenu
    }
  }
</script>

<style lang="less">
  @import '../less/index.less';
  @import '../less/timeline.less';

  .client-detail {

    .menu-wrapper{
      position: fixed;
      left:0;
      bottom: 0;
      z-index: 100;
      width: 100%;
    }


    .client-detail-body{
       padding-top: 18px;
       padding-left: 20px;
       border-bottom: 1px solid #eee;;
       padding-bottom: 10px;
       position: fixed;
       left:0;
       top:0;
       z-index: 100;
       background-color: white;
       width: 100%;
    }

    .timeline-wrap{
      padding-top: 8em;
      padding-bottom: 2em;
    }


     .alter-link{
       color: #35ADFF;
       border-bottom: 1px solid #35ADFF;
     }

    .client-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }

    }


    .img-wrapper {

      width: 2.5em;
      height: 2.5em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }


    .property-items{
      &:extend(.clearfix all);
      padding: 10px 0;

      &>span{
        float: left;
        line-height: 15px;
        height: 15px;
        padding-right: 12px;
        font-size: 14px;
      }

      &>span:not(:last-child) {
        border-right: 1px solid #B2B2B2;
      }

      &>span:not(:first-child) {
        padding-left: 12px;
      }
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
      margin-right: 10px;
    }

    .grey{
      color: #B2B2B2!important;
    }

    .ico.grey{
      font-size: 12px;
      color:#9C9C9C;
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }

    .scroll-view{
      background-color: white;
    }

  }

</style>
